<template>
  <div class="layout">
    <el-tabs type="border-card">
      <el-tab-pane label="登录">
        <el-form
            label-position="right"
            label-width="60px"
            style="max-width: 460px"
            class="loginForm"
        >
          <el-form-item label="姓名：">
            <el-input v-model="name" />
          </el-form-item>
          <el-form-item label="密码：">
            <el-input type="password" v-model="password" />
          </el-form-item>

          <el-row>
            <el-checkbox
                class="checkBox"
                v-model="isAgree"
                label="同意用户使用准则"
                name="type"
            />
          </el-row>
          <el-button
              v-if="isAgree"
              type="primary"
              class="loginBtn"
              @click="login"
          >
            登录
          </el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="注册">
        <Form/>
      </el-tab-pane>
      <el-tab-pane label="忘记密码">
        <el-form
            label-position="right"
            label-width="60px"
            style="max-width: 460px"
            class="loginForm"
        >
          <el-form-item label="姓名：">
            <el-input v-model="name" />
          </el-form-item>
          <el-form-item label="手机：">
            <el-input type="phonenumber" v-model="phonenumber" />
          </el-form-item>
          <el-form-item label="QQ：">
            <el-input type="QQ" v-model="QQ" />
          </el-form-item>
          <el-button
              type="primary"
              class="loginBtn"
              @click="findPassword"
          >
            找回密码
          </el-button>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { reactive, toRefs } from "@vue/reactivity";
import { ElMessage } from "element-plus";

import Form from "../views/Form.vue";
import qs from "qs";
import axios from "axios";
import router from "@/router";
export default {
  components: {Form},
  data(){
    return{
      userToken:'',
    }
  },
  setup() {
    const form = reactive({
      name:"",
      phonenumber: "",
      password: "",
      QQ:"",
      isAgree: 0,
    });
    const open = (message) => {
      ElMessageBox.alert("你的密码是:"+message, '打卡小助手', {
        callback:()=> {
        },
      })
    }
    function findPassword(){
      let datas={
        method:'POST',
        url:'/api/user/forgetpassword',
        data:qs.stringify({
          'username':form.name,
          'phonenumber':form.phonenumber,
          'QQ':form.QQ,
        })
      }
      axios(datas).then(function (res){
        if(res.data.isTrue=="true"){
          open(res.data.password)
        }else{
          open("手机号或QQ与姓名不匹配")
        }
      })
    }
    // 方法
    function selectUser(){
      let name=form.name
      let pass=form.password
      let options={
        method:'POST',
        url:'/api/user/login',
        data:qs.stringify({
          'username':name,
          'password':pass
        })
      }
      axios(options).then(function (res){
        console.log(res.data.token)
        if(res.data.token=='true'){
          localStorage.setItem("Name",form.name)
          router.push("/home")
        }else{
          alert("用户名或密码错误")
        }
        // this.userToken = 'Bearer ' + res.data.token;
        // this.$router.push("/home")
        // this.$store.mutations.changeLogin({Authorization:this.userToken})
      }).catch(function (err){
        console.log(err)
      })
    }
    // 登录
    function login() {
      console.log(qs.parse(form))
      selectUser()
    }
    return {
      ...toRefs(form),
      login,
      findPassword,
    };
  },
};
</script>

<style scoped>
.layout {
  position: absolute;
  left: calc(50% - 200px);
  top: 20%;
  width: 400px;
}
.loginBtn {
  width: 100px;
}
.loginForm {
  text-align: center;
}
.checkBox {
  margin-left: 7px;
}
.inpWidth {
  width: 165px;
}
</style>